<template>
  <div class="designDiv">
     <!-- 头部按钮 -->
    <div class="headerDiv">
      <div class="headerDiv_left">
          <i :class="rotate ? 'el-icon-refresh rotateGo' : 'el-icon-refresh rotateBack'"  @click="refreshBtn"></i>
      </div>
      <el-form :inline="true" class="demo-form-inline headerDiv_right">
          <el-form-item>
            <el-input v-model="formInline" placeholder="请输入要搜索的题目" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryMessage">查询</el-button>
          </el-form-item>
      </el-form>
    </div>

     <!-- 中间表单 -->
    <div class="contentDiv">
      <el-table
        ref="multipleTable"
        :data="dataShows"
        tooltip-effect="dark"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        style="width: 100%"
        :cell-style="tableRowStyle"
        >
        <el-table-column
          :show-overflow-tooltip="true"
          prop="college"
          label="学院"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="empClass"
          label="班别"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="topicTitle"
          label="题目"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          prop="stuName"
          label="选题学生"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="jsName"
          label="老师"
          align="center"
          >
        </el-table-column>
        <el-table-column
          label="选题情况"
          align="center"
          >
          <template slot-scope="scope">
            <div v-show="scope.row.topicSelect === '1'" style="color: red;font-weight: 900">已选</div>
            <div v-show="scope.row.topicSelect === '0'" style="color: green;font-weight: 900">未选</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          >
          <template slot-scope="scope">
            <el-button type="text" @click="checkMessage(scope.row.topicId, scope.row.stuNum)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div> 

    <!-- 分页按钮 -->
    <div class="pagingTool">
       <el-pagination background @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="current" 
                  :page-size="pageSize"
                  layout="prev, pager, next, jumper, slot, total" 
                  :total="total" class="pageInfo">
          <span id="sure">确定</span>
       </el-pagination>
    </div>
  </div>
</template>

<script>
import { axiosRequest } from "@/utils/axiosRequest";
export default {
  data() {
    var userInfo = JSON.parse(window.sessionStorage.getItem('userInfo')).user;
    return {
      nowMen:userInfo.empName,
      rotate: false,
      formInline: '',
      tableData: [],
      queryDatas: [],
      // 分页
      current:1,      //默认显示第一页数据
      pageSize:5,     //每页显示多少条数据
      total:0,        //一共多少条后台数据
      dataShows: [],   //当前显示的数据
      pageNum: 1,     //共有几页
      totalPage: [],  //所有页面的数据
    }
  },

  methods: {
    // 刷新按钮事件
    refreshBtn() {
      var self = this;
      if(self.rotate == false){
        self.rotate = true;
      }else {
        self.rotate = false;
      }
      self.gettableList();
      self.$message({
          showClose: true,
          message: '刷新成功！！！',
          type: 'success'
        });
    },

    // 查询按钮事件
    queryMessage() {
      var self = this;
      var newTables = self.queryDatas;
      var newsQuerys = self.formInline.toLowerCase();
      let newArrays = [];
      newArrays = newTables.filter( function(e){
         if(JSON.stringify(e).toLowerCase().indexOf(newsQuerys) !== -1){
           return e;
         }
      });
      if(newArrays.length !== 0){
          self.$message({
              message: '查找成功，这是一条成功消息',
              type: 'success'
          });
      } else {
         self.$message({
              message: '我记得没有这一条信息的哦',
              type: 'warning'
          });
      }
      self.total = newArrays.length;
      self.pageNum = Math.ceil(self.total / self.pageSize) || 1;
          for(let i = 0; i < self.pageNum; i++){
            self.totalPage[i] = newArrays.slice(self.pageSize * i, self.pageSize * (i + 1))
          }
      self.dataShows = self.totalPage[self.current - 1];
    },

    // 表格鼠标悬停样式
    tableRowStyle() {
      return `cursor: pointer;`
    },

    // 查看按钮事件
    checkMessage(i,j) {
      var self = this;
      self.$router.push({ name:'EnterInfo' ,params:{id:i,newStuNum:j}});
    },

    //每页显示
    handleSizeChange(val) {
      this.pageSize = val;
      this.current=1;
    },

    //显示页
    handleCurrentChange(val) {
      this.current = val;
      this.gettableList();
    },

    // 请求后台题目数据
    gettableList(){
      var self = this;
      var newToticDatas = [];
      axiosRequest("get","/topicInfo/listAll",null).then((res) => {
          if (res.data.code === 200) {
              self.tableData = res.data.data;
              newToticDatas = self.tableData.filter( (e) => { return e.jsName == self.nowMen});
              self.queryDatas = JSON.parse(JSON.stringify(res.data.data));
              self.total = newToticDatas.length;
              self.pageNum = Math.ceil(self.total / self.pageSize) || 1;
              for(let i = 0; i < self.pageNum; i++){
                self.totalPage[i] = newToticDatas.slice(self.pageSize * i, self.pageSize * (i + 1))
              }
              self.dataShows = self.totalPage[self.current - 1];
          } else {
              self.$message({
                showClose: true,
                message: '错了哦，请求信息失败了！！！',
                type: 'error'
              });
            }
        });
    },
   
  },

  mounted: function(){
    var self = this;
    self.gettableList();
  },
}
</script>

<style lang="less" scoped>
.designDiv {
  padding-left: 10px;
  position: relative;
}

.headerDiv {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.headerDiv_left {
  width: 35%;
  min-width: 320px;
}

.headerDiv_left > i {
  margin-left: 5%;
  margin-top: 3%;
}

.rotateBack {
  transform: rotate(180deg);
  transition: all 2s;
}

.rotateGo {
  transform: rotate(-180deg);
  transition: all 2s;
}

.headerDiv_left > i:hover {
  color: #218ef3;
  cursor:  pointer;
}

.headerDiv_right /deep/ .el-button {
  padding: 8px 15px;
}

.headerDiv_right /deep/ .el-input__inner {
    height: 35px;
}

.pagingTool{
  position: absolute;
  top: 458px;
}

#sure {
    border: 1px solid #DCDFE6;
    text-align: center;
    line-height: 25px;
    display: inline-block;
    margin: 0px 15px;
    cursor: pointer;
    width: 4%;
    border-radius: 3px;
}

</style>
